<template>
  <div class="cesiumContainer" id="cesiumContainer"></div>
</template>
   
  <script>
export default {
  name: "cesium",
  props: {
    msg: String,
  },
  data() {
    return {
      cesium: {},
      token:
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkN2E2ODk3Yy0zOGI3LTQ2YjItODU4OS1iZDY0NTY2Mjc3Y2UiLCJpZCI6NTM5ODUsImlhdCI6MTYxOTUxMTUyMn0.wTgQsW0fekiGGyiM3fuVi3chuVgcciSmu9ZPHWxNS0c",
    };
  },
  mounted() {
    this.initCesium1();
    this.$emit("callFatherCesium", {
      Cesium: Cesium,
      viewer: this.cesium.viewer,
    });

    this.updateClientRects();
  },
  methods: {
    initCesium() {
      var viewer = new Cesium.Viewer(cesiumContainer, {
        //useDefaultRenderLoop: false,
        selectionIndicator: false,
        homeButton: false,
        sceneModePicker: false,
        infoBox: false,
        navigationHelpButton: false,
        navigationInstructionsInitiallyVisible: false,
        animation: false,
        timeline: false,
        fullscreenButton: false,
        allowTextureFilterAnisotropic: false,
        baseLayerPicker: false,

        contextOptions: {
          webgl: {
            alpha: false,
            antialias: true,
            preserveDrawingBuffer: true,
            failIfMajorPerformanceCaveat: false,
            depth: true,
            stencil: false,
            anialias: false,
          },
        },

        targetFrameRate: 60,
        resolutionScale: 0.1,
        orderIndependentTranslucency: true,
        //加载底图
        imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
          url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
        }),
        geocoder: false,
        automaticallyTrackDataSourceClocks: false,
        // creditContainer : "hidecredit", //注意：这里需要注释掉，否则会报找不到容器的问题
        dataSources: null,
        clock: null,
      });
      viewer.scene.globe.depthTestAgainstTerrain = false;
      this.cesium.viewer = viewer;
    },
    initCesium1() {
      Cesium.Ion.defaultAccessToken = this.token;
      let viewerOption = {
        terrainProvider: Cesium.createWorldTerrain(),
        // useDefaultRenderLoop: false,
        selectionIndicator: false,
        homeButton: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        infoBox: false,
        navigationHelpButton: false,
        navigationInstructionsInitiallyVisible: false,
        animation: false,
        timeline: false,
        fullscreenButton: false,
        allowTextureFilterAnisotropic: false,
        contextOptions: {
          webgl: {
            alpha: false,
            antialias: true,
            preserveDrawingBuffer: true,
            failIfMajorPerformanceCaveat: false,
            depth: true,
            stencil: false,
            anialias: false,
          },
        },
        targetFrameRate: 60,
        resolutionScale: 0.1,
        orderIndependentTranslucency: true,
        imageryProvider: undefined,
        baseLayerPicker: false,
        geocoder: false,
        automaticallyTrackDataSourceClocks: false,
        dataSources: null,
        clock: null,
        terrainShadows: Cesium.ShadowMode.DISABLED,
      };
      const viewer = new Cesium.Viewer("cesiumContainer", viewerOption);
      this.cesium.viewer = viewer;
    },
    updateClientRects() {
      var modelRect = null;
      var modeldiv = document.getElementById("cesiumContainer").parentNode;
      var pntdivrec = modeldiv.getClientRects();
      if (pntdivrec.length)
        modelRect = modelRect = {
          left: pntdivrec[0].left,
          top: pntdivrec[0].top,
          width: pntdivrec[0].width,
          height: pntdivrec[0].height,
        };
      else
        modelRect = {
          left: 0,
          top: 0,
          width: window.innerWidth,
          height: window.innerHeight,
        };

      //关于padding，需要偏移 比如本框架中，由el-main的样式产生了四边各20Px的偏移。
      // var padding = 20;
      // if (this.isCompont) padding = 0;
      // modelRect.left = modelRect.left + padding;
      // modelRect.top = modelRect.top + padding;
      // modelRect.width = modelRect.width - padding;
      // modelRect.height = modelRect.height - padding;
      var domdiv = document.querySelector(".cesium-widget");
      domdiv.childNodes[0].style.width = modelRect.width + "px";
      domdiv.childNodes[0].style.height = modelRect.height + "px";
      domdiv = document.querySelector(".cesium-viewer-bottom");
      domdiv.style.display = "none";
    },
  },
};
</script>
   
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>